import React, { FC } from "react"
import { Box, Typography, useTheme } from "@mui/material"
import { SxProps } from "@mui/system"

interface ITTageProps {
  title: string
  color?: string
  sx?: SxProps
}

const TTech: FC<ITTageProps> = (props) => {
  const theme = useTheme()
  const { title, color = theme.palette.primary.main, sx } = props

  return (
    <Typography
      variant="h6"
      align="center"
      sx={{
        display: "inline-block",
        borderRadius: "5px",
        fontSize: "12px",
        color: "#fff",
        // color,
        padding: "3px 20px",
        textAlign: "center",
        backgroundColor: color,
        // border: `2px solid ${color}`,
        transition: "all 0.3s ease",
        fontWeight: "500",
        cursor: "pointer",

        "&:hover": {
          transform: "scale(1.1)",
        },

        ...sx,
      }}
    >
      {title}
    </Typography>
  )
}
export default TTech
